<template>
  <div style="width: 100%; height: 100vh; overflow: hidden" :style="bg">
    <div style="width: 400px; margin: 100px auto">
      <div style="font-size: 30px; text-align: center; padding: 30px 0">
        宠物爱好者社区注册
      </div>
      <el-form ref="form" :model="form" size="normal" :rules="rules">
        <el-form-item prop="username" v-if="registerByPhone === false">
          <el-input
            prefix-icon="el-icon-user-solid"
            v-model="form.username"
            placeholder="请输入用户名"
          ></el-input>
        </el-form-item>
        <el-form-item prop="password" v-if="registerByPhone === false">
          <el-input
            prefix-icon="el-icon-lock"
            v-model="form.password"
            show-password
            placeholder="请输入密码"
          ></el-input>
        </el-form-item>
        <el-form-item prop="confirm" v-if="registerByPhone === false">
          <el-input
            prefix-icon="el-icon-lock"
            v-model="form.confirm"
            show-password
            placeholder="请确认密码"
          ></el-input>
        </el-form-item>
        <el-form-item prop="phone" v-if="registerByPhone === true">
          <el-input
            prefix-icon="el-icon-user-solid"
            v-model="form.phone"
            placeholder="请输入手机号"
          ></el-input>
        </el-form-item>
        <el-form-item prop="code" v-if="registerByPhone === true">
          <div style="display: flex">
            <el-input
              prefix-icon="el-icon-lock"
              v-model="form.code"
              style="width: 60%"
              placeholder="请输入短信验证码"
            ></el-input>
            <div style="width: 5%; height: 100%"></div>
            <el-button
              :disabled="countDown > 0"
              style="width: 35%"
              @click="sendVerificationCode"
              >{{
                countDown > 0 ? `${countDown} s后重新发送` : "发送验证码"
              }}</el-button
            >
          </div>
        </el-form-item>
        <el-form-item>
          <el-button style="width: 100%" type="primary" @click="register"
            >注册</el-button
          >
        </el-form-item>
        <el-form-item>
          <el-button type="text" @click="$router.push('/login')"
            >&lt;&lt;返回登录
          </el-button>
          <el-button
            v-if="registerByPhone === false"
            type="text"
            @click="registerByPhone = true"
            >手机号注册 >>
          </el-button>
          <el-button
            v-if="registerByPhone === true"
            type="text"
            @click="registerByPhone = false"
            >用户名密码注册 >>
          </el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import request from "@/utils/request";

export default {
  name: "Register",
  data() {
    return {
      form: {},
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
        confirm: [{ required: true, message: "请确认密码", trigger: "blur" }],
      },
      bg: {
        backgroundImage: "url(" + require("@/assets/bg.jpg") + ")",
        backgroundRepeat: "no-repeat",
        backgroundSize: "cover",
      },
      registerByPhone: false,
      countDown: 0,
      timer: null,
    };
  },
  beforeUnmount() {
    // 组件销毁时清除定时器，避免内存泄漏
    if (this.timer) {
      clearInterval(this.timer);
    }
  },
  methods: {
    //短信验证码倒计时
    sendVerificationCode() {
      // 发送验证码的逻辑
      request.get("/sms?phone=" + this.form.phone).then((res) => {
        if (res.code === 0) {
          this.$message({
            type: "success",
            message: res.msg,
          });
        } else {
          this.$message({
            type: "error",
            message: res.msg,
          });
        }
      });
      // 发送验证码后启动倒计时
      this.countDown = 60;
      this.timer = setInterval(() => {
        if (this.countDown > 0) {
          this.countDown--;
        } else {
          clearInterval(this.timer);
          this.timer = null;
        }
      }, 1000);
    },
    register() {
      if (this.registerByPhone === false) {
        if (this.form.password !== this.form.confirm) {
          this.$message({
            type: "error",
            message: "2次密码输入不一致！",
          });
          return;
        }

        this.$refs["form"].validate((valid) => {
          if (valid) {
            //提交请求到后端接口
            request.post("/userinfo/register", this.form).then((res) => {
              if (res.code === 0) {
                this.$message({
                  type: "success",
                  message: "注册成功",
                });
                //登录成功之后进行页面的跳转，跳转到登录页
                this.$router.push("/login");
              } else {
                this.$message({
                  type: "error",
                  message: res.msg,
                });
              }
            });
          }
        });
      } else {
        //提交请求到后端接口
        request.post("/sms/register", this.form).then((res) => {
          if (res.code === 0) {
            this.$message({
              type: "success",
              message: res.msg,
            });
            //登录成功之后进行页面的跳转，跳转到登录页
            this.$router.push("/login");
          } else {
            this.$message({
              type: "error",
              message: res.msg,
            });
          }
        });
      }
    },
  },
};
</script>

<style scoped></style>
